<!DOCTYPE html>
<html lang=''>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        {{ name }}
        <button @click="getName">获取名字</button>
    </div>
</body>
<script>
    // const app = Vue.createApp({
    //     data () {
    //         return {
    //             name: '张一',
    //             age: 18,
    //             sex: '女',
    //             h: 160,
    //         }
    //     },
    //     methods: {

    //     },
    //     computed: {

    //     },
    //     watch: {

    //     }
    // })
    // app.mount('#app')


    Vue.createApp({
        setup (props) {
            let name = '张一'
            function getName () {
                console.log(name);
                // 此时可以获取到 name 属性，但是无法实时更新
                // 也就是该 name 属性不具备响应式
                name = '张三'
            }

            // 在 setup 函数中无法使用 this ,因为 this 指的是 window
            // console.log(this);

            return {
                name,
                getName
            }
        }
    }).mount('#app')

</script>

</html>